<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="primary" size="default" @click="addProduct"
          >新增品牌</el-button
        >
      </div>
      <el-table :data="userTable" border style="width: 100%">
        <el-table-column type="index" label="#" align="center">
        </el-table-column>
        <el-table-column prop="name" label="品牌名称" align="center">
        </el-table-column>

        <el-table-column label="是否展示" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.showStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="switchChangeShow(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="logo" width="180" align="center">
          <template slot-scope="scope">
            <div class="img">
              <img :src="scope.row.logo" class="img" alt="" align="center" />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="专区大图" width="180" align="center">
          <template slot-scope="scope">
            <div class="img">
              <img :src="scope.row.bigPic" class="img" alt="" align="center" />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="brandStory" label="品牌故事" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center">
        </el-table-column>
        <el-table-column
          prop="productCount"
          label="产品评论数量"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="firstLetter"
          label="是否品牌制造商"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="btn">
              <el-button type="primary" size="mini" @click="editRow(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" @click="delRow(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="start"
        :page-sizes="[5, 10]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="fullData"
      >
      </el-pagination>
    </el-card>

    <el-dialog title="品牌详情" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="formList"
        label-width="150px"
        :inline="false"
        size="normal"
        
      >
        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="品牌名称">
              <el-input v-model="formList.name"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="首字母">
              <el-input v-model="formList.firstLetter"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="排序">
              <el-input v-model="formList.sort"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="产品数量">
              <el-input v-model="formList.productCount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="是否展示">
              <el-switch
                v-model="formList.showStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="是否为品牌制造商">
              <el-switch
                v-model="formList.factoryStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="上传专区大图">
              <el-upload
                class="avatar-uploader"
                ref="bigPic"
                action="/lejuAdmin/material/uploadFileOss"
                :headers="{ token }"
                :on-success="uploadBigPicSuccess"
              >
                <img
                  v-if="formList.bigPic"
                  class="img"
                  :src="formList.bigPic"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> 
            </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="上传logo图">
              <el-upload
                class="avatar-uploader"
                ref="logo"
                action="/lejuAdmin/material/uploadFileOss"
                :headers="{ token }"
                :on-success="uploadLogoSuccess"
              >
                <img v-if="formList.logo" class="img" :src="formList.logo" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="enterUpdate">确 定</el-button>
      </span>
    </el-dialog>

    <buttomBanner></buttomBanner>
  </div>
</template>

<script>
import buttomBanner from "@/components/buttomBanner";
import { getToken } from "@/utils/auth.js";
import {
  findBrandByPage,
  delBrand,
  switchShowStatus,
  updateBrand,
  addBrand
} from "@/api/product/brand/brand.js";
export default {
  data() {
    return {
      formList: {},
      formListStatus:"",
      dialogVisible: false,
      userTable: [],
      start: 1,
      limit: 5,
      fullData: 0
    };
  },
  computed: {
    token() {
      return getToken();
    },
  },
  components: {
    buttomBanner,
  },
  methods: {
    // 新增品牌
    addProduct() {

      this.dialogVisible = true;
      this.formListStatus = 1
      this.formList={};
    },
    // 确认更新状态
    enterUpdate() {
        var api;
        if(this.formListStatus){
            api = addBrand
        }else{
            api = updateBrand
        }
      api(this.formList).then((res) => {
        if (res.success) {
          this.$message.success("编辑成功");
        } else {
          this.$message.error(res.message);
        }
        this.formList={}
        this.dialogVisible = false;
        this.init();
      });
    },
    // 图片上传成功
    uploadBigPicSuccess(v) {
      if (v.success) {
        this.$forceUpdate()
        this.$refs.bigPic.clearFiles();
        this.formList.bigPic = v.data.fileUrl;
        console.log(this.formList);
      }
    },
    // logo图片上传成功
    uploadLogoSuccess(v) {
      if (v.success) {
        this.$forceUpdate()
        this.$refs.logo.clearFiles();
        this.formList.logo = v.data.fileUrl;
      }
    },
    // 一页展示更多数据
    handleSizeChange(v) {
      this.limit = v;
      this.start = 1;
      this.init();
    },
    // 换页
    handleCurrentChange(v) {
      this.start = v;
      this.init();
    },
    // 删除当前行数据
    delRow(id) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          if (res == "confirm") {
            delBrand(id).then((res) => {
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.init();
              }
            });
          }
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 更改显示隐藏
    switchChangeShow(item) {
      var obj = {
        id: item.id,
        status: item.showStatus,
      };
      switchShowStatus(obj).then((res) => {
        if (res.success) {
          this.$message.success("更改状态成功");
          this.init();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 编辑当前行
    editRow(item) {
      this.dialogVisible = true;
      this.formList = Object.assign({},item);
      this.formListStatus = ""
      
    },
    // 初始化数据
    init() {
      findBrandByPage(this.start, this.limit).then((res) => {
        if (res.success) {
          this.userTable = res.data.rows;
          this.fullData = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.img {
  width: 100px;
  height: 100px;
  overflow: hidden;
  background-color: #bfa;
  margin: 0 auto;
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
.btn {
  display: flex;
}
</style>